<template>
  <div>
    <!--
  filter:作用：字符加工
  用法:
     全局过滤器
        Vue.filter('过滤器名字',(str)=>{
          方法内不可使用this
          return 加工后的字符
        })
     局部过滤器
        filters:{
          过滤器名字(str){
            return 加工后的字符
          }
        }

     使用：(只能用于v-bind {{  }})
       {{ str实参值 | 过滤器名字 }}

       需求：数据=3，让它显示的值*2

 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item | setNum(5) }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [1, 2, 3, 4]
    }
  },
  filters: {
    setNum (num, step) {
      if (num === 3) {
        return num * step
      }
      return num
    }
  }
}
</script>
<style></style>
